<template>
  <div class="page-stock-inventory-counting-new-take-stock container">
    <div class="basicInfo-container">
      <!-- native modifier has been removed, please confirm whether the function has been affected  -->
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        label-width="auto"
        label-position="right"
        @submit.prevent
      >
        <span class="title">{{ $t("product.basicInformation") }}</span>
        <el-divider />
        <el-form-item
          :label="$t('takeStock.createTime')"
          prop="createTime"
        >
          <el-date-picker
            v-model="dataForm.createTime"
            type="datetime"
            :placeholder="$t('admin.seleData')"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item
          :label="$t('takeStock.regionName')"
          prop="stockRegionName"
        >
          <el-input
            v-model="dataForm.stockRegionName"
            style="width: 30%"

            type="text"
            show-word-limit
            maxlength="20"
            :placeholder="$t('takeStock.regionName')"
          />
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('takeStock.regionNameTip')"
            placement="top"
          >
            <el-icon><InfoFilled /></el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item
          :label="$t('publics.remark')"
          prop="remark"
        >
          <el-input
            v-model="dataForm.remark"
            style="width: 30%"
            type="textarea"

            show-word-limit
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 5 }"
            :placeholder="$t('product.content')"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="foot-btn">
      <div
        v-if="isAuth('multishop:takeStock:save')"
        class="default-btn primary-btn"
        @click="confirmSave(1)"
      >
        {{ $t('takeStock.editInventory') }}
      </div>
      <div
        class="default-btn"
        @click="confirmSave(2)"
      >
        {{ $t("resource.cancel") }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { isAuth } from '@/utils'
import moment from 'moment'
import { validNoEmptySpace } from '@/utils/validate'
const Router = useRouter()
const validateStockRegionName = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('shopProcess.inputAllSpace')))
  } else {
    callback()
  }
}
const validateRemark = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('shopProcess.inputAllSpace')))
  } else {
    callback()
  }
}
const dataForm = reactive({
  createTime: moment().add('days').format('YYYY-MM-DD HH:mm:ss'), // 盘点开始时间
  stockRegionName: '', // 盘点区域名称
  remark: '' // 备注
})
const dataRule = {
  createTime: [
    {
      type: 'string',
      required: true,
      message: $t('takeStock.createTimeNotNull'),
      trigger: 'change'
    }
  ],
  stockRegionName: [
    { validator: validateStockRegionName, trigger: 'blur' }
  ],
  remark: [
    { validator: validateRemark, trigger: 'blur' }
  ]
}
onMounted(() => {})

const dataFormRef = ref(null)
const confirmSave = (status) => {
  if (status === 1) {
    dataFormRef.value?.validate((valid) => {
      if (valid) {
        http({
          url: http.adornUrl('/stock/takeStock'),
          method: 'post',
          data: http.adornData(dataForm)
        }).then(({ data }) => {
          ElMessage({
            message: $t('publics.operation'),
            type: 'success',
            duration: 1500
          })
          Router.push({
            path: '/stock/inventory-counting/edit-take-stock',
            query: {
              takeStockId: data
            }
          })
        })
      }
    })
  } else if (status === 2) {
    Router.push({
      path: '/stock/inventory-counting/take-stock',
      query: {}
    })
  }
}

</script>
<style lang="scss" scoped>
.container {
  .basicInfo-container {
    .title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
    }
  }
  /* 脚部按钮 */
  .foot-btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    background: #fff;
    // border-top: 1px solid #ddd;
    box-shadow: 0 -2px 3px rgba(139, 139, 139, 0.1);
    z-index: 1999;
  }
}
</style>
